<template>
  <div class="minebox">
    <header>
      <div class="top">
        <img
          @click="gotowhere('home')"
          src="../../assets/images/logo.png"
          alt=""
        />
      </div>
<!-- 
      <div class="nick-name">
        <span v-if="!userinfo" @click="gotowhere('login')"> 立即登录 </span>
        <span v-else> {{ userinfo.username }} / {{ userinfo.phone }} </span>
      </div> -->

      <!-- <div class="bottom">
        <p>
          登录ID:<span v-if="!userinfo" @click="gotowhere('login')"></span>
           <span v-else> {{ userinfo.username }} / {{ userinfo.phone }} </span>
        </p>
        
        <van-button native-type="submit" block type="primary" @click="logot"
          > </van-button
        >
      </div> -->

      <div class="bottom">
        <p>
          登录ID:<span>{{ getPhone() }}</span>
        </p>
        <van-button native-type="submit" block type="primary" @click="logot"
          >退出登入</van-button
        >
      </div>
    </header>

    <div class="mebox">
      <div class="me">
        <p>我的账户</p>
      </div>
      <van-row class="mine-bottom">
        <van-cell-group>
          <van-cell title="个人资料" is-link />
          <van-cell title="安全中心" is-link />
          <van-cell title="地址薄" is-link />
          <van-cell title="账号绑定" is-link />
          <van-cell title="尺码表" is-link />
        </van-cell-group>
      </van-row>
    </div>

    <div class="mebox">
      <div class="me">
        <p>订单中心</p>
      </div>
      <van-row class="mine-bottom">
        <van-cell-group>
          <van-cell title="我的订单" is-link />
          <van-cell title="退款退货" is-link />
          <van-cell title="我的换货" is-link />
          <van-cell title="退货凭证" is-link />
          <van-cell title="订单回收" is-link />
        </van-cell-group>
      </van-row>
    </div>

    <div class="mebox">
      <div class="me">
        <p>会员中心</p>
      </div>
      <van-row class="mine-bottom">
        <van-cell-group>
          <van-cell title="优惠券" is-link />
          <van-cell title="收藏夹" is-link />
          <van-cell title="站内信" is-link />
        </van-cell-group>
      </van-row>
    </div>

    <div class="kong"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      active: "pass",
      login: {},
      type1: "password",
      sms: {},
      flag: false,
      count: 60,
      timer: null,
       isLogin:localStorage.phone?true:false
    };
  },
  methods: {
    getPhone() {
      if (localStorage.getItem("phone")) {
        return localStorage.getItem("phone");
      } else {
        return "xxx";
      }
    },
    //退出登录
    logot() {
      localStorage.setItem("phone", "");
      this.$router.push({
        name: "login",
      });
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading("验证中...");

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
  },
};
</script>


<style lang="scss" scoped>
.minebox {
  background: #f4f4f4;
  header {
    width: 100%;
    background: #fff;
    z-index: 100;
    border-bottom: 0.5px solid #b9b9b9;

    .top {
      padding: 10px 20px;
      height: 60px;
      border-bottom: 0.3px solid #b9b9b9;
      img {
        width: 40px;
        height: 40px;
      }
    }
    .bottom {
      height: 100px;
      padding: 10px 30px;
      text-align: center;
      font-size: 14px;
      color: #1b1b1b;
      p {
        margin-bottom: 10px;
      }
    }

    span {
      font-size: 20px;
    }
  }
  .mebox {
    border-bottom: 0.5px solid #b9b9b9;
    .me {
      height: 50px;
      line-height: 50px;
      padding: 0 15px;
      p {
        font-weight: 700;
        font-size: 20px;
        color: #1b1b1b;
      }
    }
  }
  .kong {
    width: 100%;
    height: 100px;
  }
}
</style>